<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas绘图</title>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
			
		</canvas>
		<script type="text/javascript">
			//获取Canvas对象（画布）
			var canvas = document.getElementById("myCanvas");
			//检测当前浏览器是否支持Canvas对象
			if (canvas.getContext) {
			//获取对应的CanvasRenderingContext2D对象
			var ctx = canvas.getContext("2d");
			//创建新的图片对象
			var img = new Image();
			//指定图片的URL
			img.src="img/mao.jpg";
			//浏览器加载图片完毕后再绘制图片
			img.onload=function(){
				//以Canvas画布上的坐标(50,50)为起始点，绘制图像
				//图像的宽度和高度分别缩放到300px和300px
				ctx.drawImage(img,50,50);
			};
		  }
		</script>
	</body>
</html>